<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录页面</title>

    <link rel="stylesheet" href="CSS/common.css">
    <link rel="stylesheet" href="CSS/login.css">
    <script src="js/jQuery.min.js"></script>

</head>
<body>
    <!-- 导航栏 -->
    <div class="nav">
        <img src="Imag/导航栏头像.png">
        <!-- span 标签不独占一行, 是一个小盒子 -->
        <span class="title"> 我的博客系统 </span>
        <div class="spacer"></div>
        <!-- # 在a标签中表示占位符 -->
        <a href="blog_list.html" id="list">主页</a>
        <a href="blog_editor.html" id="write">写博客</a>
       
    </div>

    <!-- 登录整体页面部分 -->
    <div class="login_container">
        <!-- 垂直水平居中的对话框 -->
        <div class="login_dialog">

            <!-- action 对应请求路径  method 对应求情方法 name属性对应 username 这个key值 name属性中的 password 对应 password这个可以 -->
                <h3>登录</h3>

                <div class="row">
                    <span>用户名</span>
                    <input type="text" id="username" placeholder="手机号/邮箱" name="username">
                </div>

                <div class="row">
                    <span>密码</span>
                    <input type="password" id="password" >

                </div>

                <div class="row">
                    <input type="submit" id="submit" value="登录">
                </div>

                <div class="row">
                     <a href="blog_logon.html">立即注册</a>
                </div>
            
        </div>
    </div>

    <script>

        let list = document.querySelector('#list');
        let wirite = document.querySelector('#write');
        list.onclick = function () {
            alert('请登录后使用!');
        }
        
        write.onclick = function () {
            alert('请登录后使用!');
        }

        // 获取输入框内的账号和密码

        let username = document.querySelector('#username')
        let password = document.querySelector('#password')

        let submit = document.querySelector('#submit');

        // 点击提交登陆按钮获取信息
        submit.onclick = function() {
            
            let body = {
                'password':password.value,
                'username':username.value
            }

            if(body.username === null) {
                alert('用户名不能为空, 请重新输入!');
                return;
            }

            if(body.password === null) {
                alert('密码不能为空, 请重新输入!');
                return;
            }

            $.ajax({
                type: 'post',
                url: 'login',
                contentType: 'application/json; charset = utf8',
                // 数据为 js 对象, 需要转成 json 格式字符串
                data:JSON.stringify({'password':body.password, 'username':body.username}),
                success: function(body) {
                    // body 中为后端发来的账号密码校验码
                    if(body.issuccess === false) {
                        alert('账号或密码错误, 请重新输入');
                    }else {
                        location.assign('blog_list.html');
                    }
                }
            });
        }

        // let input = document.querySelector("#password");
        // let button = document.querySelector("#password");

        // button.onclick = function() {
        //     if(input.type == 'text') {

        //         input.type = 'password';
        //     }
        // }
        
        

    </script>
</body>
</html>